<template>
  <div id="coupons" style="background-color: #f7f7f7">
    <nav-bar title="优惠券市场" fixed  :zIndex="10"/>
    <div class="coupons-container">
      <en-empty v-if="finished && !couponsList.length">暂无优惠券</en-empty>
      <van-list
        v-else
        v-model="loading"
        :finished="finished"
        @load="onLoad"
      >
        <a
          v-for="(coupon, index) in couponsList"
          :key="index"
          href="javascript:;"
          class="item-coupon"
          :class="[coupon.create_num === coupon.received_num && 'brought-out']"
        >
          <div class="inner-coupon">
            <img class="img-coupon" src="">
            <p class="name-coupon">
              <span>{{ coupon.title }}</span>
            </p>
            <span class="price-coupon">
              <em>¥{{ coupon.coupon_price }}</em>满{{ coupon.coupon_threshold_price }}可用
            </span>
            <span class="shop-name" v-if="coupon.use_scope">
              仅限
              <em v-if="coupon.use_scope === 'ALL'">全平台</em>
              <em v-if="coupon.use_scope === 'CATEGORY'">品类</em>
              <em v-if="coupon.use_scope === 'SOME_GOODS'">部分商品</em>
              使用
            </span>
            <span class="shop-name" v-else>
              <em :title="coupon.seller_name">仅限 <nuxt-link :to="'/shop/' + coupon.seller_id">{{ coupon.seller_name }}</nuxt-link> 店铺使用</em>
            </span>
            <div class="receive-coupon" @click="receiveCoupon(coupon)">
	            <span v-if="coupon.create_num === coupon.received_num" class="icon-receive-coupon-out">已领完</span>
	            <span v-else class="icon-receive-coupon">立即<br>领取</span>
            </div>
          </div>
        </a>
      </van-list>
    </div>
  </div>
</template>

<script>
  import * as API_promotions from '@/api/promotions'
  import * as API_Members from '@/api/members'
  import Storage from '@/utils/storage'
  export default {
    name: 'coupons',
    head() {
      return {
        title: `优惠券市场-${this.site.title}`
      }
    },
    data() {
      return {
        loading: false,
        finished: false,
        params: {
          page_no: 0,
          page_size: 10
        },
        couponsList: []
      }
    },
    methods: {
      /** 加载数据 */
      onLoad() {
        this.params.page_no += 1
        this.GET_Coupons()
      },
      /** 领取优惠券 */
      receiveCoupon(coupon) {
        if (!Storage.getItem('refresh_token')) {
          this.$confirm('您还未登录，要现在去登录吗？', () => {
            this.$router.push({ path: '/login', query: {forward: `${this.$route.path}`} })
          })
          return false
        }
        API_Members.receiveCoupons(coupon.coupon_id).then(() => {
          this.$message.success('领取成功！')
        })
      },
      /** 获取优惠券列表 */
      GET_Coupons() {
        this.loading = true
        API_promotions.getAllCoupons(this.params).then(response => {
          this.loading = false
          const { data } = response
          if (!data || !data.length) {
            this.finished = true
          } else {
            this.couponsList.push(...data)
          }
        })
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  @import "../assets/styles/color";
  .coupons-container {
    padding: 56px 10px 0 10px;
  }
  .item-coupon {
    margin: 0 0 10px;
    color: $color-main;
    display: block;
    position: relative;
    height: 114px;
    z-index: 1;
	  &.brought-out {
		  filter: grayscale(100%);
	  }
    &::after {
      content: "";
      position: absolute;
      top: 5px;
      bottom: 5px;
      left: 0;
      right: 50px;
      box-shadow: 2px 2px 10px 8px hsla(0,0%,67%,.2);
    }
  }
  .inner-coupon {
    position: relative;
    z-index: 1;
    height: 114px;
    background-color: #fff;
    mask-border-source: url();
    mask-border-width: 10px 85px 10px 0;
    mask-border-slice: 20 168 20 1 fill;
    border-radius: 5px
  }
  .img-coupon {
    display: block;
    width: 75px;
    height: 75px;
    position: absolute;
    left: 10px;
    top: 20px;
    border-radius: 4px;
  }
  .name-coupon {
    font-size: 12px;
    color: #666;
    position: absolute;
    left: 90px;
    top: 50px;
    right: 80px;
    span {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
  .price-coupon {
    font-size: 14px;
    position: absolute;
    left: 90px;
    right: 80px;
    top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    em {
      display: inline-block;
      vertical-align: -2px;
      margin-right: 6px;
      font-size: 30px;
      line-height: 30px;
    }
  }
  .receive-coupon {
    display: block;
    width: 75px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: currentColor;
    border-radius: 0 5px 5px 0;
    .icon-receive-coupon {
      display: block;
      font-size: 12px;
      color: rgba(0,0,0,.2);
      border: 2px solid currentColor;
      border-radius: 50%;
      text-align: center;
      position: absolute;
      left: 50%;
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      line-height: 15px;
      color: #fff;
      margin: 0;
      width: 50px;
      height: 50px;
      padding: 9px 0;
      box-sizing: border-box;
      top: 50%;
    }
	  .icon-receive-coupon-out {
		  display: block;
		  font-size: 12px;
		  color: rgba(0,0,0,.2);
		  border: 2px solid currentColor;
		  border-radius: 50%;
		  text-align: center;
		  position: absolute;
		  left: 50%;
		  -webkit-transform: translate(-50%,-50%);
		  transform: translate(-50%,-50%);
		  line-height: 30px;
		  color: #fff;
		  margin: 0;
		  width: 50px;
		  height: 50px;
		  padding: 9px 0;
		  box-sizing: border-box;
		  top: 50%;
	  }
  }
  .shop-name{
    font-size: 12px;
    color: #666;
    position: absolute;
    left: 90px;
    bottom: 10px;
    right: 80px;
  }
</style>
